見るための方法|説明

リストアイテムにポップアップを生成させる |リストアイテムに表示されている枠で囲われた画像や動画をクリック、又はタップします。これによりそれらがポップアップ・ウインドウで表示されます。

ページ上、リストアイテムなどに既に表示されている画像や動画を見る場合にしか使えませんが、全ビューア中これが最も多機能です。
画像や動画のサイズなどを変更するためのボタンが付いてきます。

スワイプ動作でもポップアップを閉じる事ができます。

拡大や縮小、サイズ変更、反転などが左右マウスボタン、ホイール、Ctrlキー、Altキーなどのコンビネーションで機能します。
videoの場合は再生速度を変更するボタンが付いてきます。

videoのコントロール表示と非表示を切り替えるには「・・・」ボタンを押します。

ポップアップではサイズ変更をしたりポップアップを閉じたりするためのコントロールボタンボックスを使用できます。
通常、ボタンボックスを表示させるにはポップアップ上をダブルクリック、又はダブルタップするか長押しします。
確実にボタンボックスを表示させたい場合は、ポップアップ上のボックスを表示させたい位置を長押しして下さい。
これは、ポップアップ上のダブルクリックやダブルタップを起動条件とするポップアップの機能はボタンボックスの表示だけでは無いためです。
例えばビデオやオーディオのポップアップのダブルクリック／ダブルタップでは、

ポップアップ中央: 停止と再生
ポップアップ左端: 巻き戻し
ポップアップ右端: 早送り

が実行されます。

Drop-Me-Imageにポップアップを生成させる |リストアイテムに表示されている枠で囲われた画像や動画をページの空きスペースにドラッグ＆ドロップします。上記、「リストアイテム生成ポップアップ」とほぼ同等のものです。

「V＋」ボタンを押す |表示させたい画像や動画をプルダウンメニューから選択の上、V+ボタンを押します。これによりイメージビューア＋が別タブで開きます。
この別タブで開く仕様の為、モダンなWebブラウザではその仕様によってスライドショーをはじめとする各機能が一定時間後にほぼ停止（スリープ）状態になり使えなくなります。
スリープ状態になった後に再び親のタブに戻れば復活しますが、復活後の機能持続時間は極端に短く、この作業を繰り返さなければならないとなれば面倒すぎます。
これを避けるには今のところその仕様でない旧式のWebブラウザを使う他ありません。

リストアイテムに表示されている画像や動画を表示するには、プルダウンメニューからそれらを選択しなければなりません。
また、何列にして表示させるかなども選択せねばなりません。

このイメージビューアの動作が止まってしまったように見える場合は、使用した「V+」ボタンのあるタブを再度選択し直す必要があるかもしれません。
それによりイメージビューア上で動作するスクリプトを、効果は持続しないものの、再活性化させられるかもしれません。

「V」ボタンを押す|Vボタンを押します。これによりイメージビューアが別タブで開きます。
この別タブで開く仕様の為、携帯用Webブラウザではその仕様によってはスライドショーをはじめとする各機能が不安定になります。

リストアイテムに登録されている全ての画像や動画をフィルターや特別なチェックを介さずにそのままに表示しようとします。
この仕様から動作時の負荷が非常に高くなることが懸念されますが、生の登録画像や動画を確認（デバッグ）するために使えます。

ページ・イメージビューアを開く |ページ・イメージビューアは別タブで開かずにそのページで見るタイプのイメージビューアです。
PCの場合、デフォルトではV+ボタンを押すと新規タブを作るイメージビューアが開き、Altキーを押しながらV+ボタンを押すとページ・イメージビューアが開きます。
携帯の場合はPCの場合とは逆で、デフォルトでページ・イメージビューアが開きます。
携帯の場合、V+ボタン3秒以上長押しの後にボタンを離すとAltキーと同じ動作をします。
PCのデフォルトでページ・イメージビューアを開きたい場合は、「設定」の「イメージビューアのデフォルトのオプション」入力ボックス、もしくはリストアイテム用のオプション入力ボックスを「設定」の「イメージビューア＋の為のオプションボックスを表示する。」にチェックすることで表示させて、オプションテキストに「pageIV;」を加えます。
携帯の場合にデフォルトでページ・イメージビューアが開くのはこの「設定」のオプションテキストに「pageiv;」が自動でセットされるためです。

ページ・イメージビューアはスライドショーや動画プレイリストをボタン一つで再生できます。
別タブを作らずにそのページで動作するため、選択タブ以外のスクリプト動作を極力抑えようとする現代的なブラウザや携帯用Webブラウザでの動作の安定が期待できます。

タッチ操作やマウス操作、スワイプ動作で、ポーズ、スライドショーの終了、次のスライドへ移動、前のスライドへ移動などができます。

videoのコントロールを表示させるには、マウスカーソルをビューア外部からビューア内部の最下部にあるコントロール表示部分に移動させます。
携帯の場合は一度ビューア外部をタップしてからビューア内部の最下部にあるコントール表示部分をタップします。

ビューア上の内容が動画でなく画像の場合に、それをShiftキーを押しながらページの空きスペースにドラッグ＆ドロップすれば、上記、Drop-Me-Image生成のポップアップが表示されます。

新規タブで開くイメージビューア＋と比べ、エラーが起こった際に何が起きているのか分かり辛いのが難点の一つです。
通常、サイト最上部にクリック（又はタップ）するとイベントログが参照できる箇所があり、そこでAlertとしてポップアップ表示されない種類のエラーを確認できます。

キー・コンビネーション |Altキーを押しながらV+ボタンを押すと、デフォルトで使用するように設定されているビューアとは異なるビューアが開きます。
デフォルトのイメージビューアが別タブで開くイメージビューアの場合は現ページで開くページビューアが、デフォルトのイメージビューアが現ページで開くページビューアの場合は別タブで開くイメージビューアが開きます。

Ctrlキーを押しながらV+ボタンを押す、またはイメージビューアのオプションテキストに「popupIV;」を加えた上でV+ボタンを押すと「リストアイテム付属のイメージ選択プルダウンメニュー」で選択されている項目に含まれているソースがポップアップして開きます。
「リストアイテム付属のイメージ選択プルダウンメニュー」で選択されている項目に複数のソースが含まれる場合は第1番目のソースが使われます。

方法|説明

Timetableボタンを押して区間再生を設定する。 |ポップアップ動画ウインドウにTimetableボタンがある場合はそれを使って区間再生を設定できます。

書式
repeat:リピート回数 , 開始秒または時間 - 終了秒または時間

例
repeat:0, 0-10, 90-120, 3600-3608
上の例と同等で、repeat:0, 00:00-00:10, 01:30-02:00, 1:0:0-1:0:8
上の例と同等で、repeat:0, 0s-10s, 1m30s-2m0s, 1h0s-1h8s この書式の場合、秒パートsは必須になり、s以降の数字はミリ秒指定になります。

0-10を2回再生するには、repeat:1, 0-10, repeat:0, 90-120

なお、区間再生を動画に1つでも設定すると、全ての区間再生の完了時に動画は最初の区間再生に戻ります。
この規定動作により、「repeat:0, 0-10」も「repeat:4, 0-10」も「repeat:0, 0-10, 0-10, 0-10, 0-10 」も同じ結果になります。

Timetableボタンで書き込むテキストにデータの終了を示すセミコロン「;」を入れるとデータ構造が壊れる場合があります。
場合によりデータ構造が壊れてしまう例
repeat:0, 0-10, 90-120, 3600-3608;

これを適正なデータに修正するには、
repeat:0, 0-10, 90-120, 3600-3608
とします。

dropMeImageで動画のすぐ後にTimetableボタンを作って区間再生を設定する。 |例
C:\httpdocroot\video\test.mp4;

Timetable=
repeat: 0,
00:00-00:08,
00:19-00:23,

repeat: 1,
13:46-13:54,

repeat: 0,
18:52-20:03
;

ListItemBaseのtooltipbaseに区間再生設定を書き込む。 |

例

注意点

TimetableテキストにHTMLタグ（）やkey=value構造（position=bottomLeftなど）、特定のクォーテーション・マーク（引用符のうち"や'）が含まれる場合には上の例のようにその部分をコメント化してtooltipbase書式が壊れるのを避けなければなりません。

オプション名|書式|説明|使用例

オプション全般|| 「repeat」項目は必須で、もしなければTimetable設定として認識されず、Timetableオプションも無視されます。 |有効な例
Timetable=
repeat: 0,
volume: 0.3
;
無効な例
Timetable=
volume: 0.3
;

キャプション |caption:文字列｜表示時間（ミリ秒）｜フォントサイズ｜文字色｜背景色｜キャプション位置

又は、

caption:文字列｜key1=value1 key2=value2 keyX=valueX ...
|オプション名はキャプションですが、本来の目的は動画上に文字を表示させる事ではなく、動画ウインドウ上の「GoTo」ボタンでアクセスできる区間再生ジャンプメニューに文字や画像を表示させるためのものです。
captionはその区間再生位置の説明やサムネイルとして機能します。

文字列部分はHTMLで記述する事が可能ですので、結果的には画像など、文字列以外も出せます。
dropMeのDescにTimetableを書く場合にはセミコロンは*semicolon*に置き換える必要があります。

また、文字列・イコール・ダブルクォーテーションの組（例えば、文字列="文字列"）は文字列・イコール・シングルクォーテーションの組（文字列='文字列'）に置き換える必要があります。

つまり、のstyleのようなエレメントの属性値の記述部分はこのルールに従ってのようにシングルクォーテーションと*semicolon*を使う必要があります。

表示時間など｜で区切られたオプションは省略できます。
表示時間を省略した場合は3000ms（3秒間）になります。
キャプション文字列を保持するエレメントのクラス名は「divVideoCaption」となっていますので、CSSからデフォルトの文字の色や大きさなどを指定できます。

キャプション・テキストの部分強調表示を[ ]ペアを使って表現できます。
[ ]ペアを使って強調表示させた場合の文字の大きさと色は「設定」にて設定できます。
ポップアップやツールチップに表示されている動画の場合は「ポップアップ / ツールチップ」セクションにて、ページ・イメージビューアに表示されている動画の場合は「ページ・イメージビューア」セクションにて設定できます。

キャプション位置には、
center, 中央（デフォルト値）
bottom, 中央下
bottomLeft, 左下
top, 中央上
topLeft, 左上

above, 動画ウインドウの上部
below, 動画ウインドウの下部
rightside, 動画ウインドウの右側
leftside, 動画ウインドウの左側
があります。

｜で区切られたオプション文字列に@を入れるとスクリプトはそのオプションを無視します。
これは、オプションの位置を間違えないために使えます。
例えば、キャプション｜@delay｜@size｜@color｜@bgcolor｜@position、をコピー＆ペーストしてそこから編集すればまず位置は間違えません。

【captionのオプション設定にkey=valueの書式を使用する場合】
「key=value」パートに複数のオプションを設定するときは半角スペース区切りにする必要があります。
keyの種類には、delay、size、color、bgcolor、positionがあります。
|（例1: 砂場サンプルより）
Timetable=
repeat:0,
caption:,
0s-2s,
0s-3s
;

（例2: 区間再生ポイントに画像を結びつける）
Timetable=
repeat:0,
caption:｜@delay｜@size｜@color｜@bgcolor｜bottomLeft,
volume:0,
playbackrate:1,
00:00-00:11
;

（例3: captionのオプション設定にkey=valueの書式を使用）
Timetable=
repeat:0,
caption:スタート｜position=bottomLeft color=red,
volume:0,
playbackrate:1,
00:00-00:11
;

Timetableテキストはカンマ「,」で分割されたテキストを一つ一つ順に解釈して処理します。
下のように項目の書き順を変えると処理されるタイミングが変わりますのでご注意ください。
Timetable=
repeat:0,
caption:スタート,（処理タイミング：即時）
playbackrate:0.5,（処理タイミング：即時）
00:00-00:11（処理タイミング：即時）
;
上のデータの書き順を下のように変えると．．．
Timetable=
repeat:0,
caption:スタート,（処理タイミング：即時）
00:00-00:11（処理タイミング：即時）
playbackrate:0.5,（処理タイミング：上の項目の処理から11秒以上経過した後）
;

キャプション文字列について、「GoToメニューには表示させたいがコンテンツ画面には表示させたくない」という場合は、例えばcolor=transparentとすれば簡単に解決できます。

動画再生速度、プレイバック・レート |playbackRate:数値 |例えば数値が1の場合は1倍速度、0.5の場合は半分の速度になります。
数値の有効範囲についてはHTML5 videoの仕様や各Webブラウザでの仕様をご確認下さい。
|（砂場サンプルより）
Timetable=
repeat:0,
playbackrate:1,
0s-2s,
playbackrate:0.5,
0s-3s
;

音量、ボリューム |volume:数値 |例えば数値1で最大音量、数値0.5で半分の音量、数値0でミュートと同じ状態になります。
|（砂場サンプルより）
Timetable=
repeat:0,
volume:0,
0s-2s,
volume:1,
0s-3s
;